<template>
  <!-- 默认插槽 -->
  <BaseSlot>
    <strong>插入内容</strong>
  </BaseSlot>
  <BaseSlot>
    <BaseSlot></BaseSlot>
  </BaseSlot>

  <NamedSlot :slotName="slotName">
    <template v-slot:header>
      <h3>header</h3>
    </template>
    <!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
    <template v-slot:default>
      <p>main</p>
    </template>
    <template #footer>
      <i>footer</i>
    </template>
    <template #[slotName]>
      <h3>动态插槽名</h3>
    </template>
  </NamedSlot>

  <ScopedSlot :list="list">
    <template v-slot="whateverYouNameIt">
      <strong>{{ whateverYouNameIt.item }}</strong>
    </template>
  </ScopedSlot>

  <!-- 独占默认插槽的缩写语法 -->
  <ScopedSlot :list="list" v-slot="whateverYouNameIt">
    <p>{{ whateverYouNameIt.item }}</p>
  </ScopedSlot>

  <ScopedSlot :list="list">
    <template v-slot:default="whateverYouNameIt">
      <strong>{{ whateverYouNameIt.item }}</strong>
    </template>

    <template v-slot:namedSlot="{ index }">
      <i>{{ index + ' ' }}</i>
    </template>
  </ScopedSlot>
</template>

<script>
import BaseSlot from './BaseSlot.vue'
import NamedSlot from './NamedSlot.vue'
import ScopedSlot from './ScopedSlot.vue'
export default {
  components: {
    BaseSlot,
    NamedSlot,
    ScopedSlot
  },
  data() {
    return {
      slotName: 'slotName',
      list: [1, 2, 3, 4, 5]
    }
  }
}
</script>

NamedSlot
<style scoped></style>
